<template>
	<div>
		<div class="boxes" v-loading="loading">
			<div class="navs">
				<div class="nav-box" v-for="(item, index) in tableData" :key="index">
					<!-- <img class="nav-icon" :src="item.filePath" alt="" /> -->
					<div class="nav-msg">
						<div class="nav-title">"{{ item.paperName }}"</div>
						<div class="nav-time vue-btn">
							<div>
								<div>开放时间：{{item.startTime}}</div>
								<div>结束时间：{{item.endTime}}</div>
								<div>考试时限：{{item.examLength}}分钟</div>
							</div>
							<div @click="getInto(item.isExam,item.paperId)" class="classification" v-if="item.isExam == 0">进入考试</div>
							<div @click="getInto(item.isExam,item.paperId)" class="classification classification2" v-if="item.isExam == 1">查看成绩</div>
							<div class="classification classification3 " v-if="item.isExam == 2">考试过期</div>
						</div>
					</div>
				</div>
			</div>
		
			<div style="display: flex;justify-content: center;margin: 20px 0;">
				<el-pagination
					background
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-size="pagesize"
					layout="total,prev,pager,next"
					:total="pages"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import { paperList } from '../../../../network/api';
export default {
	name: 'yktTest',
	data() {
		return {
			loading:true,
			currentPage: 1, // 当前页码
			pagesize: 6, // 每页显示的行数
			pages: 0,
			tableData: []
		};
	},
	components: {
		
	},
	created() {},
	mounted() {
		this.getList(1);
	},
	methods: {
		// 切换页数
		handleCurrentChange(val) {
			this.currentPage = val;
			this.getList(val);
		},
		getList(page) {
			let param = {
				isExam:'',
				page: page,
				limit: this.pagesize
			};
			paperList(param).then(res => {
				// console.log(res);
				this.tableData = res.retData.records;
				this.pages = res.retData.total;
				this.loading = false
			});
			
		},
		
		getInto(status,id){
			if(status == 0){// 考试入口
				this.$router.push({ path: '/ykt/getExamination',query: { id: id } });
			}else if(status == 1){// 查看成绩
				this.$router.push({ path: '/ykt/testDetail',query: { id: id } });
			}
		}
		
	}
};
</script>
<style lang="scss" scoped>
	.boxes {
		border: 1px solid #eeeeee;
		text-align: left;
		border-top: 2px solid #cc0000;
	}
	.boxes-back {
		border-bottom: 1px solid #eeeeee;
		padding: 10px 20px;
		color: #cb1c1d;
		font-weight: bold;
	}
	// 列表
	.navs {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}
	
	.nav-box {
		width: 31.3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 1%;
		position: relative;
	}
	
	.nav-msg{
		text-align: left;
		width: 100%;
		padding: 0 10px;
		border: 1px solid #EEEEEE;
	}
	.nav-title {
		margin: 10px 0;
		line-height: 160%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.nav-time{
		width: 100%;
		font-size: 14px;
		color: #999999;
		margin-bottom: 20px;
		line-height: 180%;
	}
	
	.classification{
	  background-color: #2964A5;
	  border-radius: 15px;
	  padding: 3px 12px;
	  color: #ffffff;
	}
	.classification2{
	  background-color: #CB1C1D;
	}
	
	.classification3{
	  background-color: #999999;
	}

</style>

